<template>
    <!-- <div class="bindContainer">
        <div style="text-align:center;">
            <h1>绑定单位</h1>
        </div>
        <div class="bindInput">
            <el-autocomplete
            v-model="selectCompany"
            class="bindDiv"
            :fetch-suggestions="querySearchAsync"
            placeholder="搜索单位名称（查询）"
            @select="handleSelectCompany"
            ></el-autocomplete>
            <button style="margin-left:8px;" @click="comfirmBind" class="bindButton">确认绑定</button>
        </div>
        <div style="text-align:right;">
            <p><router-link to="/addBindCompany" class="registrePath">未搜到单位，添加单位</router-link></p>
        </div>
    </div> -->
       <div class="container">
        <div class="registerPanelBody">
            <div class='regiterTitle'>
            <h1>绑定单位</h1>
        </div>
            <div class="registerDiv">
                <el-autocomplete
                v-model="selectCompany"
                :fetch-suggestions="querySearchAsync"
                placeholder="搜索单位名称（查询）"
                @select="handleSelectCompany"
                ></el-autocomplete>
            </div>
            <div class="registerSelect">
                <el-select v-model="registerCompany" placeholder="请选择街道">
                    <!-- <el-option-group
                    v-for="group in districts"
                    :key="group.label"
                    :label="group.label"> -->
                    <el-option
                        v-for="item in streets"
                        :key="item.street"
                        :label="item.street"
                        :value="item.street">
                    </el-option>
                    <!-- </el-option-group> -->
                </el-select>
            </div>
                <div class="RegisterSecurityCode">   
                    <el-input
                        placeholder="请输入验证码"
                        v-model="RegisterSecurityCode"
                        clearable>
                    </el-input>
                    <input v-on:click="sendSecurityCode" class="verify-btn" type="button" v-model="btnContent" v-bind="{'disabled':disabled}">
                </div>
                <div class="registerButton" style="text-align: center;">
                    <el-row>
                        <el-button type="primary" @click='bind'>绑定</el-button>
                    </el-row>
                </div>
                <div class="loginBlock">
                    <p class="p_right"><router-link to="/addBindCompany" class="registrePath">未搜到单位，添加单位</router-link></p>
                </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            selectCompany:'',
            registerCompany:'',
            streets:[],
            timeout:  null,
            listResults:[],
            RegisterSecurityCode:'',
            btnContent:'获取验证码',
            disabled:false,
            companyId:null,
        }
    },
    mounted:function(){
        this.getStreet();
    },
    methods:{
        querySearchAsync(queryString, cb) {
            var regWords = /[\u4e00-\u9fa5]/;
            var results = [];
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {//计时器
                if(this.selectCompany){
                    var self = this;
                    this.$http({
                    method:'get',
                    url:'/inventory/select?name='+this.selectCompany,
                    }).then(function(res){
                    let data = res.data;
                    if(data.status === 200){
                        var results = res.data.data;;
                        cb(results);
                    }else{
                        this.$message.error(data.message);
                    }
                    }).catch(function(err){
                    console.log(err);
                    })
                }
            }, 3000 * Math.random());
        },
        handleSelectCompany(item) {
          console.log(item);
          this.companyId = item.id;
        },
        //获取街道
        getStreet(){
            let self = this;
            this.$http({
                method:'get',
                url:'/street/getAll',
            }).then(function(res){
                console.log(res);
                let data = res.data;
                if(data.status === 200){
                    self.streets = data.data;
                }else{
                    self.$message.error(data.message);
                }
            }).catch(function(err){
                console.log(err)
            })
        },
        // 计时器
        timer(){
            if(this.time>0){
            this.time--;
            this.btnContent = this.time+"s后重新获取";
            this.disabled = true;
            var timer = setTimeout(this.timer,1000);
            }else if(this.time == 0){
            this.btnContent = "获取验证码";
            clearTimeout(timer);
            this.disabled = false;
            }
        },
        // 获取验证码
        sendSecurityCode(){
            this.time = 120;
            this.timer();
            let self = this;
            //发送验证码端口请求
            this.$http({
            method:'get',
            url:'/code/checkCode',
            }).then(function(res){
                console.log(res);
                let data = res.data;
                if(data.status === 200){
                    self.$message.success(data.message);
                }else{
                    self.$message.error(data.message);
                }
            }).catch(function(err){
                console.log(err);
            })
        },
        // 绑定
        bind(){
               //判断字段必填
            if(!this.companyId){
                this.$message.error("请选择单位");
                return;
            }
            if(!this.registerCompany){
                this.$message.error("请选择街道");
                return;
            }
            if(!this.RegisterSecurityCode){
                this.$message.error("请输入验证码");
                return;
            }
            let self = this;
              this.$http({
                method:'post',
                url:'inventory/bind',
                data:{
                    "invId":this.companyId,
                    "subdistric":this.registerCompany,
                    "captcha":this.RegisterSecurityCode,
                    },
            }).then(function(res){
                console.log(res);
                let data = res.data;
                if(data.status === 200){
                    self.$message.success(data.message);
                    self.$router.push({ path: "/choicefirm" });

                }else{
                    self.$message.error(data.message);
                }
            }).catch(function(err){
                console.log(err)
            })
        },
    }
}
</script>

